<template>
  <div class="new_div1">
    <el-dialog
      open-delay="0"
      close-delay="0"
      v-model="openUp"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      title="物流信息"
      width="75%"
      draggable
    >
<!--      {{openUp}}-->
      <div class="line">
        <el-timeline  v-if="openUp && openUp.length>0">
              <el-timeline-item :class="index === 0 ?'line1':'line2'"  v-for="(item,index) in openUp" :key =index :timestamp="item.time" placement="top" :icon="index === 0 ?'Check':'ArrowUp'" size="large">
            <el-card>
              <p>
                {{item.context}}
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <div v-else class="supreme">
          <el-empty description="查无结果，请检查单号和快递公司是否有误" />
<!--          <p>

          </p>-->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const openUp = ref<any>(false)
const list = ref([])
//抛出数据
defineExpose({
  openUp,// 弹窗
})
</script>

<style lang="scss" scoped>
@import '../index';
.line{
  height:calc(100vh - 143px);
  overflow:auto;
  :deep(){
    .el-timeline{
      padding-left: 160px;
      padding-top: 20px;
      padding-right: 10px;
    }
    .el-timeline-item__timestamp.is-top {
      position: absolute;
      top: 18px;
      left: -130px;
    }
    .el-timeline-item__node--large{
      top: 18px;
    }
    .el-timeline-item__tail{
      top: 30px;
    }
    .el-card__body{
      padding: 5px 16px ;
    }
  }
}
.supreme{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  font-size: 20px;
  color: #ff976f;
}
.line1{
  :deep(){
    .el-timeline-item__node {
      position: absolute;
      background-color: #fff;
      border: 1px solid #7cd51b;
    }
   .el-timeline-item__icon{
      color: #7cd51b;
      font-size: 13px;
    }
    .is-top {
     color: #3b85fa;
    }

  }
}
.line2{
  :deep(){
    .el-timeline-item__node {
      position: absolute;
      background-color: #fff;
      border: 1px solid #e4e7ed;
    }
    .el-timeline-item__icon{
      color:#b7bfd0;
      font-size: 13px;
    }
  }
}
</style>
